<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="divvv" style="width: 100%;height:30vh;color: #fff;"></div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts';
import { io } from 'socket.io-client';

onMounted(() => {

  type EChartsOption = echarts.EChartsOption;
  var myChart = echarts.init(document.getElementById('divvv'));
  window.addEventListener('resize', function () {
    myChart.resize();
  });
  var chartDom = document.getElementById('divvv')!;
  myChart = echarts.init(chartDom);
  var option: EChartsOption;


  option = {

    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['活动区', '干饭区', '宿舍区', '吸烟区', '教学区']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '活动区',
        type: 'line',
        smooth: true,
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '干饭区',
        type: 'line',
        smooth: true,
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '教学区',
        type: 'line',
        smooth: true,
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '宿舍区',
        type: 'line',
        smooth: true,
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: '吸烟区',
        type: 'line',
        smooth: true,
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };


  option && myChart.setOption(option);

  var data1: number[] = [];
  var data2: number[] = [];
  var data3: number[] = [];
  var data4: number[] = [];
  var data5: number[] = [];
  var dates: string[] = [];
  for (let j = 0; j < 5; j++) {
    var now = new Date();
    var date = [now.getHours(), now.getMinutes(), now.getSeconds() + j].join(":");
    dates.push(date);
    console.log(date,'date');
    
  }
  function addData() {
    var now = new Date();

    const socket = io("http://localhost:8080");

    var date = [now.getHours(), now.getMinutes(), now.getSeconds()].join(":");
    dates.push(date);

    socket.on('data', (data: any) => {
      
      data1 = data.data1
      data2 = data.data2
      data3 = data.data3
      data4 = data.data4
      data5 = data.data5
    });


    //移除数组中的第一个元素,保持数组的长度不变
    if (dates.length > 5) {
      dates.splice(0, 1)
    }

    myChart.setOption({
      series: [
        {
          name: "运动区",
          data: data1,
        },
        {
          name: "宿舍区",
          data: data2,
        },
        {
          name: "教学区",
          data: data3,
        },
        {
          name: "吸烟区",
          data: data4,
        },
        {
          name: "干饭区",
          data: data5,
        },
      ],
      xAxis: {
        data: dates,
      },
    });
  }

  //每秒调用 addData 函数更新数据
  setInterval(addData, 1000);
})

</script>